<template>
  <div class="app-container">
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="200px" :disabled="~~form.status == 1">
        <el-form-item v-if="form.status" label="注册状态：" prop="status">
          <span :style="statusDict.find((item) => item.key == form.status).style">{{
            statusDict.find((item) => item.key == form.status).label
          }}</span>
        </el-form-item>
        <el-form-item label="单位名称：" prop="orgName">
          <el-input v-model="form.orgName" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="单位类别：" prop="orgType">
          <el-select v-model="form.orgType">
            <el-option label="党政机关" value="1" />
            <el-option label="事业单位" value="2" />
            <el-option label="国有企业" value="3" />
            <el-option label="其他单位" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="保密资质：" prop="secretQualification">
          <el-input v-model="form.secretQualification" placeholder="请输入保密资质" />
        </el-form-item>
        <el-form-item label="涉密证书：" prop="netLicenseNumber">
          <el-input v-model="form.netLicenseNumber" placeholder="请输入涉密证书编号" />
        </el-form-item>
        <el-form-item label="综合审计证书：" prop="zjgLicenseNumber">
          <el-input v-model="form.zjgLicenseNumber" placeholder="请输入综合审计证书编号" />
        </el-form-item>
        <el-form-item label="检测器证书：" prop="jcqLicenseNumber">
          <el-input v-model="form.jcqLicenseNumber" placeholder="请输入检测器证书编号" />
        </el-form-item>
        <el-form-item label="注册类型：" prop="protocol">
          <el-select v-model="form.protocol">
            <el-option label="http" value="http" />
            <el-option label="https" value="https" />
          </el-select>
        </el-form-item>
        <el-form-item label="上级IP：" prop="supIp">
          <el-input :disabled="form.status == '3' " v-model="form.supIp" placeholder="请输入上级IP" />
        </el-form-item>
        <el-form-item label="上级端口：" prop="supPort">
          <el-input :disabled="form.status == '3' " v-model="form.supPort" placeholder="请输入上级端口" />
        </el-form-item>
        <el-form-item label="注册类型：" prop="online">
          <el-select :disabled="form.status == '3' " v-model="form.online">
            <el-option label="离线" value="0" />
            <el-option label="在线" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.online && ~~form.online == 0" label="离线密码：" prop="filePassword">
          <el-input :disabled="form.status == '3' " v-model="form.filePassword" placeholder="请输入离线密码" />
        </el-form-item>
        <el-form-item v-if="form.status !== '1'">
          <el-button type="primary" @click="handleSubmit">{{ buttonText }}</el-button>
          <el-button v-if="form.status != '3'" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :model="form" v-if="form.online && ~~form.online == 0 && form.status == 1" label-width="200px">
        <el-form-item>
          <el-col :span="12">
            <el-button type="primary" @click="handleDownload">下载离线包</el-button>
          </el-col>
          <el-col :span="12">
            <el-upload ref="upload" accept=".zip" :limit="1" :action="upload.url" :show-file-list="false" :auto-upload="true" :on-change="handleFileUploadProgress">
              <el-button type="primary">上传离线包</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.zip</div>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getRegister, addRegister, updateRegister } from '@/api/system/report'
import { download } from '@/utils/request'


export default {
  name: 'Register',
  data() {
    return {
      form: {},
      rules: {},
      buttonText: '提交信息',
      //  状态字典
      statusDict: [
        { key: 1, label: '注册中', style: 'color: #409EFF' },
        { key: 2, label: '注册失败', style: 'color: #F56C6C' },
        { key: 3, label: '注册成功', style: 'color: #67C23A' },
      ],
      // 上传离线包参数
      upload: {
        // 设置上传的请求头部
        // headers: { [TokenKey]: getToken() },
        // 上传的地址
        url: 'http://192.168.60.117:19730/report-api/register/upload',
      },
    }
  },
  mounted() {
    this.getRegisterInfo()
  },
  methods: {
    /** 提交 */
    handleSubmit() {
      if (this.buttonText === '提交信息') {
        //  TODO: add
        addRegister(this.form).then((res) => {
          this.$message.success('注册已提交')
          this.getRegisterInfo()
        })
      } else {
        //  TODO: update
        updateRegister(this.form).then(res => {
          this.$message.success('信息已更新')
          this.getRegisterInfo()
        });
      }
    },
    /** 重置 */
    handleReset() {
      this.form = {
        status: null,
        orgName: '',
        orgType: null,
        secretQualification: '',
        netLicenseNumber: '',
        zjgLicenseNumber: '',
        jcqLicenseNumber: '',
        protocol: null,
        supIp: '',
        supPort: '',
        online: null,
        filePassword: '',
      }
    },
    /** 获取注册信息 */
    getRegisterInfo() {
      getRegister().then((res) => {
        if (res && res.id) {
          this.form = res
        } else {
          this.handleReset()
        }
        this.buttonText = res.status == 3 ? '更新信息' : '提交信息'
      })
    },
    /** 下载离线包 */
    handleDownload() {
      download('http://192.168.60.117:19730/report-api/register/download/' + this.form.id, {}, `${this.form.name || ''}_注册离线包.zip`)
    },
    /** 文件上传中处理 */
    handleFileUploadProgress(file) {
      if (file.status == 'success') {
        this.$message.success('注册已提交')
        this.getRegisterInfo()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 40%;
}
.el-form .el-form-item {
  margin-bottom: 15px;
}
</style>
